<template>
  <Modal
    v-model="datailToggle" @on-visible-change="clearAll"  :name="name" :fullscreen="fullscreen" :draggable="draggable" :mask="mask" :transfer="mask" footer-hide :width="number" :class-name="className"   @on-cancel="cancel">
    <div slot="header" class="ivu-modal-headerPadding iview-modal-theme">

      <span>{{title}}</span>
      <Icon :type="dropToggleState== true ? 'md-arrow-dropdown' : 'md-arrow-dropup'" @click="dropToggle"></Icon>
    </div>
    <div class="ivu-modal-bodyPadding" v-show="dropToggleState">
      <slot>
      </slot>
    </div>
  </Modal>
</template>

<script>
import bus from "../components/Bus"
export default {
  data() {
    return {
     // name: "modle",
      searchModal: false,
      datailToggle: false,
      dropToggleState: true,
      mask: false
    };
  },
  props: {
    name:{
      type: String,
      default: "名称"
    }
    
    ,
    title: {
      type: String,
      default: "标题"
    },
    number: {
      type: String,
      default: 300
    },
    topNum: {
      type: String,
      default: ""
    },
    className: {
      type: String,
      default: ""
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancel: function() {
      var m = this;
      //m.$Modal.remove()
    },
    dropToggle: function() {
      var m = this;
      //this.dropToggleState = !this.dropToggleState;
      m.dropToggleState = !m.dropToggleState;
    },
    /* fullscreen:function(){
          this.fullscreen = !this.fullscreen;
        },*/
    searchFunction: function() {
      this.searchModal = !this.searchModal;
    },
    clearAll: function() {
     // $emit('clear-search', )
     if(!this.datailToggle)
      bus.$emit("clear-search",this.name);
    },
    datailFunction: function() {
      //var m =this;
      this.datailToggle = !this.datailToggle;
      //m.datailContent = !m.datailContent;
    }
  }
};
</script>

<style scoped>
</style>
